<template>
  <div class="header">
    <div class="headerLeft">
      <img src="@/assets/bigScreen/headLeft.png" alt="">
      <span>脚本云服务管理平台</span>
    </div>
    <div class="headerContent">
      <div class="headerRight">
        <leftRightSwiperScroll>
          <span v-for="(item, index) in navList" :key="index" :class="{'cur':current === index}" @click="getNavItem(index)">
            <i />
            <em>{{ item }}</em>
          </span>
        </leftRightSwiperScroll>
      </div>
      <div class="timeBox">
        <span>{{ dateFormat(date) }}</span>
        <em>|</em>
        <img src="@/assets/bigScreen/backHome.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import leftRightSwiperScroll from '../components/leftRightSwiperScroll.vue'
import screenCommon from '@/utils/screenCommon'
export default {
  components: {
    leftRightSwiperScroll
  },
  mixins: [screenCommon],
  data() {
    return {
      navList: ['区域综合概况', '地图展示', '用户卡片', '视频监控'],
      current: 0
    }
  },
  mounted() {

  },
  methods: {
    getNavItem(index) {
      this.current = index
    }
  }
}

</script>
<style scoped lang='scss'>
@import url('~@/assets/fonts/font/fonts.css');
.header{
  padding-top:30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  .headerLeft{
    display:flex;
    align-items:center;
    span{
      font-size:28px;
      height:42px;
      color:white;
      margin-left:20px;
      font-family: '胡晓波男神体';
      text-align:center;
      position: relative;
      padding-top: 4px;
      &::after{
        content:' ';
          display:block;
          background:url('~@/assets/bigScreen/headLeftText.png') no-repeat center bottom;
          background-size:100% 100%;
          width:435px;
          height:50px;
          margin:0 auto;
          position:absolute;
          bottom:0;
          left:-50px;
      }
    }
  }
  .headerContent{
    display:flex;
    align-items:center;
    .headerRight{
      padding: 10px 20px;
      position: relative;
      width:900px;
        span {
          font-size: 18px;
          color:#8297A6;
          margin:0 10px;
          cursor: pointer;
          display:flex;
          align-items:center;
          &.cur{
            color:white;
            font-weight:bold;
          }
        i{
          height:28px;
          width:1px;
          background:#67D1FC;
          margin:0 15px 0 5px;
        }
        em{
          content:' ';
          display:block;
          width:136px;
          height:35px;
          line-height:35px;
          text-align:right;
          padding-right:25px;
          font-style:normal;
          background:url('~@/assets/bigScreen/navBarBg.png') no-repeat center bottom;
          background-size:100% 100%;
        }
      }
    }
    .timeBox{
      margin:0 0 0 60px;
      width:300px;
      height:42px;
      background:url('~@/assets/bigScreen/timeBg.png') no-repeat center bottom;
      background-size:100% 100%;
      display:flex;
      align-items:center;
      padding:30px 0 0 30px;
      span{
        font-size: 20px;
        color: #cbcdd2;
        width:190px;
      }
      em{
        color:#67d1fc;
        margin:0 20px 0 15px;
      }
      img{
        width:24px;
        cursor: pointer;
      }
    }
  }

}
</style>
